<template>
  <div class="notice-container">
    <div class="notice-header">
      <el-form :inline="true" :model="queryParams" class="search-form">
        <el-form-item label="标题">
          <el-input 
            v-model="queryParams.title" 
            placeholder="请输入公告标题"
            clearable
            @keyup.enter="handleSearch"
          >
            <template #prefix>
              <el-icon><Document /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select 
            v-model="queryParams.type" 
            placeholder="请选择公告类型"
            clearable
          >
            <el-option label="通知" value="notice" />
            <el-option label="公告" value="announcement" />
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select 
            v-model="queryParams.status" 
            placeholder="请选择状态"
            clearable
          >
            <el-option label="已发布" value="published" />
            <el-option label="草稿" value="draft" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button-group>
            <el-button type="primary" @click="handleSearch">
              <el-icon><Search /></el-icon>搜索
            </el-button>
            <el-button @click="resetQuery">
              <el-icon><Refresh /></el-icon>重置
            </el-button>
          </el-button-group>
        </el-form-item>
      </el-form>

      <el-button type="primary" @click="handleAdd">
        <el-icon><Plus /></el-icon>新增公告
      </el-button>
    </div>

    <div class="notice-content">
      <el-table :data="noticeList" style="width: 100%">
        <el-table-column prop="title" label="标题" min-width="200" show-overflow-tooltip />
        <el-table-column prop="type" label="类型" width="100">
          <template #default="{ row }">
            <el-tag :type="row.type === 'notice' ? 'success' : 'warning'">
              {{ row.type === 'notice' ? '通知' : '公告' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100" align="center">
          <template #default="{ row }">
            <el-tag :type="row.status === 'published' ? 'success' : 'info'">
              {{ row.status === 'published' ? '已发布' : '草稿' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column prop="publishTime" label="发布时间" width="180" />
        <el-table-column label="操作" width="250" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" link @click="handleEdit(row)">
              编辑
            </el-button>
            <el-button 
              type="primary" 
              link 
              @click="handlePublish(row)"
              v-if="row.status === 'draft'"
            >
              发布
            </el-button>
            <el-button 
              type="warning" 
              link 
              @click="handleUnpublish(row)"
              v-else
            >
              下线
            </el-button>
            <el-button type="danger" link @click="handleDelete(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="queryParams.pageNum"
          v-model:page-size="queryParams.pageSize"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 公告表单对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="formType === 'add' ? '新增公告' : '编辑公告'"
      width="800px"
      :close-on-click-modal="false"
    >
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="100px"
      >
        <el-form-item label="公告标题" prop="title">
          <el-input v-model="formData.title" placeholder="请输入公告标题" />
        </el-form-item>
        <el-form-item label="公告类型" prop="type">
          <el-radio-group v-model="formData.type">
            <el-radio label="notice">通知</el-radio>
            <el-radio label="announcement">公告</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="公告内容" prop="content">
          <el-input
            v-model="formData.content"
            type="textarea"
            :rows="6"
            placeholder="请输入公告内容"
          />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input-number v-model="formData.sort" :min="0" :max="999" />
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="formData.status">
            <el-radio label="published">立即发布</el-radio>
            <el-radio label="draft">保存草稿</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { 
  Plus, 
  Search, 
  Refresh,
  Document
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 查询参数
const queryParams = ref({
  title: '',
  type: '',
  status: '',
  pageNum: 1,
  pageSize: 10
})

// 总数
const total = ref(0)

// 公告列表
const noticeList = ref([
  {
    id: 1,
    title: '系统升级通知',
    type: 'notice',
    status: 'published',
    content: '系统将于2024年1月21日凌晨2点��行升级维护...',
    sort: 1,
    createTime: '2024-01-20 10:00:00',
    publishTime: '2024-01-20 10:30:00'
  },
  {
    id: 2,
    title: '元旦放假通知',
    type: 'announcement',
    status: 'draft',
    content: '2024年元旦放假安排...',
    sort: 2,
    createTime: '2024-01-20 09:00:00',
    publishTime: null
  }
])

// 表单相关
const dialogVisible = ref(false)
const formType = ref('add')
const formRef = ref(null)
const formData = ref({
  title: '',
  type: 'notice',
  content: '',
  sort: 0,
  status: 'draft'
})

// 表单校验规则
const formRules = {
  title: [
    { required: true, message: '请输入公告标题', trigger: 'blur' }
  ],
  type: [
    { required: true, message: '请选择公告类型', trigger: 'change' }
  ],
  content: [
    { required: true, message: '请输入公告内容', trigger: 'blur' }
  ]
}

// 搜索
const handleSearch = () => {
  queryParams.value.pageNum = 1
  // TODO: 调用搜索接口
  ElMessage.success('搜索成功')
}

// 重置查询
const resetQuery = () => {
  queryParams.value = {
    title: '',
    type: '',
    status: '',
    pageNum: 1,
    pageSize: 10
  }
  handleSearch()
}

// 新增公告
const handleAdd = () => {
  formType.value = 'add'
  formData.value = {
    title: '',
    type: 'notice',
    content: '',
    sort: 0,
    status: 'draft'
  }
  dialogVisible.value = true
}

// 编辑公告
const handleEdit = (row) => {
  formType.value = 'edit'
  formData.value = { ...row }
  dialogVisible.value = true
}

// 发布公告
const handlePublish = (row) => {
  ElMessageBox.confirm(
    '确定要发布该公告吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // TODO: 调用发布接口
    ElMessage.success('发布成功')
  })
}

// 下线公告
const handleUnpublish = (row) => {
  ElMessageBox.confirm(
    '确定要下线该公告吗？',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // TODO: 调用下线接口
    ElMessage.success('下线成功')
  })
}

// 删除公告
const handleDelete = (row) => {
  ElMessageBox.confirm(
    '确定要删除该公告吗？',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // TODO: 调用删除接口
    ElMessage.success('删除成功')
  })
}

// 提交表单
const handleSubmit = () => {
  formRef.value?.validate((valid) => {
    if (valid) {
      // TODO: 调用保存接口
      ElMessage.success(formType.value === 'add' ? '新增成功' : '修改成功')
      dialogVisible.value = false
    }
  })
}

// 分页相关
const handleSizeChange = (val) => {
  queryParams.value.pageSize = val
  handleSearch()
}

const handleCurrentChange = (val) => {
  queryParams.value.pageNum = val
  handleSearch()
}
</script>

<style scoped>
.notice-container {
  padding: 20px;
}

.notice-header {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.search-form {
  flex: 1;
}

.notice-content {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style> 